import * as React from 'react'
import { View } from "@tarojs/components";
import './index.scss'

type Prop = {
    animationType: 'center-in' | 'bottom-in',
    children: React.ReactNode
}

export default React.forwardRef((props: Partial<Prop>, ref) => {
    const {
        animationType = 'center-in',
    } = props


    React.useImperativeHandle(ref, () => ({
        show: () => {
            // console.log('123', contentViewRef.current)
            if (animationType == 'center-in') {
                dialogWarp.current.className = 'dialog-wrap show'
                contentViewRef.current.className = 'dialog-contentView show'
            } else {
                contentViewRef.current.style.visibility = 'visible'
                contentViewRef.current.style.transform = `translateY(-${contentViewRef?.current?.clientHeight}px)`
                contentViewRef.current.style.transition = 'transform 0.35s ease-in-out'
            }
        },
        hide: () => {
            if (animationType == 'center-in') {
                dialogWarp.current.className = 'dialog-wrap hide'
                contentViewRef.current.className = 'dialog-contentView hide'
            } else {
                contentViewRef.current.style.transform = 'translateY(0px)'
                contentViewRef.current.style.transition = 'transform 0.35s ease-in-out'
                setTimeout(() => {
                    contentViewRef.current.style.visibility = 'hidden'
                }, 350);
            }

        }
    }), [])

    // console.log(props.children)

    const dialogWarp = React.useRef<any>()
    const contentViewRef = React.useRef<any>()


    return (
        <View className='dialog-wrap hide' ref={dialogWarp}>
            <View
                className={animationType == 'center-in' ? 'dialog-contentView hide' : 'dialog-contentView hide at'}
                ref={contentViewRef}
            >
                {props.children}
            </View>
        </View>
    )
})